<template>
  <div class="home" id="app">
    <el-row>
      <view-top></view-top>
    </el-row>

    <!-- 筛选条件区域 -->
    <div class="filter-section">
      <el-row class="filter-row  button-group" type="flex" align="middle">
        <span class="filter-head">读者：</span>
        <el-button-group>
          <el-button @click="readerFilter = null; filterNovels()" :class="{ active: readerFilter === null }">全部</el-button>
          <el-button @click="readerFilter = '男频'; filterNovels()" :class="{ active: readerFilter === '男频' }">男频</el-button>
          <el-button @click="readerFilter = '女频';filterNovels()" :class="{ active: readerFilter === '女频' }">女频</el-button>
        </el-button-group>
      </el-row>
      <el-row class="filter-row  button-group" type="flex" align="middle">
        <span class="filter-head">分类：</span>
        <el-button-group>
          <el-button @click="categoryFilter = null;filterNovels()" :class="{ active: categoryFilter === null }">全部</el-button>
          <el-button @click="categoryFilter = '穿越';filterNovels()" :class="{ active: categoryFilter === '穿越' }">穿越</el-button>
          <el-button @click="categoryFilter = '都市';filterNovels()" :class="{ active: categoryFilter === '都市' }">都市</el-button>
          <el-button @click="categoryFilter = '历史';filterNovels()" :class="{ active: categoryFilter === '历史' }">历史</el-button>
          <el-button @click="categoryFilter = '无限流';filterNovels()" :class="{ active: categoryFilter === '无限流' }">无限流</el-button>
        </el-button-group>
      </el-row>
      <el-row class="filter-row  button-group" type="flex" align="middle">
        <span class="filter-head">状态：</span>
        <el-button-group>
          <el-button @click="statusFilter = null;filterNovels()" :class="{ active: statusFilter === null }">全部</el-button>
          <el-button @click="statusFilter = '已完结';filterNovels()" :class="{ active: statusFilter === '已完结' }">已完结</el-button>
          <el-button @click="statusFilter = '连载中';filterNovels()" :class="{ active: statusFilter === '连载中' }">连载中</el-button>
        </el-button-group>
      </el-row>
      <el-row class="filter-row  button-group"  type="flex" align="middle">
        <span class="filter-head">字数：</span>
        <el-button-group>
          <el-button @click="wordCountFilter = null;filterNovels()" :class="{ active: wordCountFilter === null }">全部</el-button>
          <el-button @click="wordCountFilter = 'less_30w';filterNovels()" :class="{ active: wordCountFilter === 'less_30w' }">30万以下</el-button>
          <el-button @click="wordCountFilter = '30w_50w';filterNovels()" :class="{ active: wordCountFilter === '30w_50w' }">30-50万</el-button>
          <el-button @click="wordCountFilter = '50w_100w';filterNovels()" :class="{ active: wordCountFilter === '50w_100w' }">50-100万</el-button>
          <el-button @click="wordCountFilter = '100w_200w';filterNovels()" :class="{ active: wordCountFilter === '100w_200w' }">100-200万</el-button>
          <el-button @click="wordCountFilter = 'more_200w';filterNovels()" :class="{ active: wordCountFilter === 'more_200w' }">200万以上</el-button>
        </el-button-group>
      </el-row>
      <el-row class="filter-row  button-group" type="flex" align="middle">
        <span class="filter-head">排序：</span>
        <el-button-group>
          <el-button @click="sortFilter = 0;filterNovels()" :class="{ active: sortFilter === 0 }">最热</el-button>
          <el-button @click="sortFilter = 1;filterNovels()" :class="{ active: sortFilter === 1 }">最新</el-button>
          <el-button @click="sortFilter = 2;filterNovels()" :class="{ active: sortFilter === 2 }">人数</el-button>
        </el-button-group>
      </el-row>
    </div>

    <!-- 筛选条件与图书榜之间的分隔线 -->
    <el-divider></el-divider>

    <!-- 图书榜 -->
    <el-card class="box-card">
      <el-row v-for="(group, groupIndex) in groupRankingNovels" :key="groupIndex">
        <el-col v-for="(novel, index) in group" :key="index" :span="8">
          <el-row type="flex" justify="space-between" align="middle">
            <el-col :span="2">
              <p class="book-rank">{{ groupIndex*3+(index+1)+(currentPage-1)*pageSize }}</p>
            </el-col>
            <el-col :span="8">
              <p class="book-title" @mouseenter="titleIndex=groupIndex*3+index" @mouseleave="titleIndex=-1" @click="jumpToBook(groupIndex*3+index)" :class="{ 'active': groupIndex*3+index===titleIndex }">{{ novel.title }}</p>
              <p class="book-type">{{ novel.tags[0] }}</p>
            </el-col>
            <el-col :span="8">
              <img :src="novel.cover" alt="图书封面" style="width: 100px; height: 150px; cursor: pointer;" 
              @click="jumpToBook(groupIndex*3+index)" >
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[6, 12, 24, 36]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rankingTotal">
    </el-pagination>
  </div>
</template>

<script>
import ViewTop from './ViewTop.vue';

export default {
  components: {
    ViewTop
  },
  data() {
    return {
      readerFilter: null,
      categoryFilter: null,
      statusFilter: null,
      wordCountFilter: null,
      totalLow: null,
      totalHigh: null,
      sortFilter: 0, // 默认排序为最热
      rankingTotal: 0,
      rankingNovels: [],
      currentPage: 1,
      pageSize: 12,
      titleIndex: -1,
    };
  },
  computed: {
    groupRankingNovels() {
      const start = 0;
      const end = start + this.pageSize;
      return this.rankingNovels
        .slice(start, end)
        .reduce((result, value, index, array) => {
          if (index % 3 === 0) {
            result.push(array.slice(index, index + 3));
          }
          return result;
        }, []);
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchBooks();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchBooks();
    },
    jumpToBook(bookId){
      
      var that=this
      this.$router.push(
        {
          path:"/book",
          query:{
            book:JSON.stringify(that.rankingNovels[bookId])
          }
        }
      )
    },
    searchBooks(){
        var that=this
        let url="/user/novel/page?page="+this.currentPage+"&pageSize="+this.pageSize;
        if(this.readerFilter!=null)
          url+="&boyOrGirl="+this.readerFilter
        if(this.sortFilter!=null)
          url+="&sort="+this.sortFilter
        if(this.categoryFilter!=null)
          url+="&tag="+this.categoryFilter
        if(this.totalLow!=null)
          url+="&totalLow="+this.totalLow
        if(this.totalHigh!=null)
          url+="&totalHigh="+this.totalHigh
        if(this.statusFilter!=null)
          url+="&status="+this.statusFilter
        this.axios({
          method: "get",
          url:url,
        }).then((res)=>{
          console.log(res.data.data)
          that.rankingNovels=res.data.data.records
          that.rankingNovels.forEach(result => {
            if(result.introduction.length>100)
              result.introduction = result.introduction.slice(0, 100) + '...';
            else
              result.introduction = result.introduction;
          });
          that.rankingTotal=res.data.data.total
          console.log(that.rankingNovels)
        }).catch((err)=>{
          console.log(err)
        })
      },
        // 筛选方法
      filterNovels() {
        switch(this.wordCountFilter){
          case 'less_30w':
            this.totalLow=0;
            this.totalHigh=30;
            break;
          case '30w_50w':
            this.totalLow=30;
            this.totalHigh=50;
            break;
          case '50w_100w':
            this.totalLow=50;
            this.totalHigh=100;
            break;
          case '100w_200w':
            this.totalLow=100;
            this.totalHigh=200;
            break;
          case 'more_200w':
            this.totalLow=200;
            this.totalHigh=null;
            break;
          default:
            this.totalLow=null;
            this.totalHigh=null;
        }
        
        this.currentPage=1;
        this.pageSize=6;
        this.searchBooks()
      },

    },
    
  mounted() {
    this.searchBooks();
  }
};
</script>

<style scoped>
.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 80%;
    margin: 24px auto;
}
.box-card{
  width: 80%;
  margin: 0px auto;
}
.filter-head{
  margin-right: 32px;
  color: rgba(0, 0, 0, .4);
}
.button-group {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  /* width: 40%; */
}
.el-button-group>.el-button:not(:last-child), .el-tabs--left .el-tabs__nav-wrap.is-left{
  margin-right: 10px;
}
.el-button-group>.el-button:not(:first-child):not(:last-child) {
    border-radius: 12px;
}
.el-button-group>.el-button:last-child {
    border-radius: 12px;
}
.el-button-group>.el-button:first-child {
  border-radius: 12px;
}
.button-group button {
  padding: 10px 20px;
  background-color: transparent;
  border: null;
  border-radius: 12px;
  cursor: pointer;
  color: #000306; /* 修改字体颜色 */
  font-size: 14px; /* 修改字体大小 */
  height: 30px;
}
.button-group button.active {
    font-size: 14px;
    font-weight: 500;
    color: #fa6725;
    background-color: rgba(250, 103, 37, .1);
}
.filter-section {
    width: 80%;
    margin: 20px auto;
    padding: 0 20px 20px;
    font-size: 14px;
    color: #333;
}

.filter-row {
  margin-bottom: 10px;
}

/* 图书排名样式 */
.book-rank {
  font-size: 18px;
  font-weight: bold;
  color: rgba(0,0,0,.4);
}

/* 图书标题样式 */
.book-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.book-title.active {
  color: red; /* 点击时字体颜色变为红色 */
  cursor: pointer;
}

/* 图书类型样式 */
.book-type {
  font-size: 14px;
  color: #999;
}
</style>

